<template>
	<view class="page">
		<!-- <header-bar :isSearchBar="true" @search="toSearch" /> -->

		<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changes' style="position: fixed;width:100%;top:0;left:0">
		</navTab>
		<!-- <yu-kefu></yu-kefu> -->

		<!-- 主界面 -->
		<view class="mainOrderContainer" v-if="itemList.length>0">
			<orderItem v-for="(item,index) in itemList" :key="index" @orderItemClick="orderItemClick" />
		</view>

		<view v-else class="flex-colum-center" style="height: 60vh;">
			<image src="../../static/img/product/noData.png" style="width: 150rpx;height: 150rpx;"></image>
			<text style="color: gray;">无数据.....</text>
		</view>

	</view>
</template>

<script>
	import navTab from "../../components/my-MenuBar/navTab.vue"
	import orderItem from "../../components/my-orderItem/orderItem.vue"
	import HeaderBar from '../../components/header-bar.vue'

	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		components: {
			navTab,
			orderItem,
			"header-bar": HeaderBar,

		},
		data() {
			return {
				tabTitle: ['待返佣', '已返佣'], //wait_payout  payout
				itemList: [],
				status: "wait_payout",
				page: 1,
				size: 10,

			}
		},
		computed: {
			...mapGetters(['inviteCode', 'uid'])
		},
		onLoad() {


		},
		onShow() {
			// 判断是否有token
			var token = uni.getStorageSync('token')
			var uid = uni.getStorageSync('uid')
			if (!token) {
				uni.navigateTo({
					url: '/pages/splash-screen/splash-screen'
				})
			} else {
				this.getCommission();

			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {

			this.init();
			this.getCommission();

			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.getCommission()
		},
		methods: {
			init() {
				this.page = 1;
				this.size = 10;
				this.itemList = [0, 1, 2, 3, 4];
			},
			changes(e) {
				console.log(e);
				var statusList = ["wait_payout", "payout"]
				this.status = statusList[e];
				this.getCommission();
			},
			getCommission() {
				let that = this;
				var param = {
					page: this.page,
					size: this.size,
					status: this.status
				}
				this.$pin.request('GET', '/commission_payout', param,
					successData => {
						if (successData.code == this.$pin.code.success) {

							var records = successData.data;
							if (records.length > 0) {
								that.itemList = that.itemList.concat(records);
								this.page++;
							} else {
								uni.showToast({
									title: '没有更多数据',
									icon: 'none'
								})
							}

						}
					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载信息时出错'
						})
					}
				)
			},
			orderItemClick(e) {
				console.log('itemClick', e);
				uni.navigateTo({
					url: './orderDetail/index'
				})

			},
		}
	}
</script>

<style lang="scss">
	.page {
		.mainOrderContainer {
			width: 100%;
			padding-top: 100rpx;
			background-color: #F7F7F7;

		}
	}
</style>